function Glass() {
    this.small_img_ele = document.querySelector(".smallImg");
    this.big_img = document.querySelector(".bigImg img")
    this.big_img_ele = document.querySelector(".bigImg");
    this.focus_ele = document.querySelector(".focus");
    this.content_ele = document.querySelector(".content");

    this.img_list = [
        {
            small: "../static/libs/images/1.big.jpeg",
            big: "../static/libs/images/1.big.jpeg"
        },
        {
            small: "../static/libs/images/2.big.jpeg",
            big: "../static/libs/images/2.big.jpeg"
        },
        {
            small: "../static/libs/images/3.big.jpeg",
            big: "../static/libs/images/3.big.jpeg"
        },
        {
            small: "../static/libs/images/4.big.jpeg",
            big: "../static/libs/images/4.big.jpeg"
        },
        {
            small: "../static/libs/images/5.big.jpeg",
            big: "../static/libs/images/5.big.jpeg"
        },
    ]
    this.content_offset = {
        left: this.content_ele.offsetLeft,
        tp: this.content_ele.offsetTop

    }
    this.focus_size = {
        width: parseInt(getComputedStyle(this.focus_ele).width),
        height: parseInt(getComputedStyle(this.focus_ele).height)
    }
}
Glass.prototype.bindEvent = function () {
    let gls = this;
    this.small_img_ele.addEventListener("mouseover", function () {
        gls.toggle("show");
    })
    this.small_img_ele.addEventListener("mouseout", function () {
        gls.toggle("hide");
    })
    this.small_img_ele.addEventListener("mousemove", function (e = Event) {
        gls.focusMove(e.pageX, e.pageY);
        gls.bigImgMove();
    });
}

Glass.prototype.toggle = function (type) {
    switch (type) {
        case "show":
            this.big_img_ele.style.display = "block";
            this.focus_ele.style.display = "block";
            break;
        case "hide":
            this.big_img_ele.style.display = "none";
            this.focus_ele.style.display = "none";
            break;
    }
}
Glass.prototype.focusMove = function (x, y) {
    
    var _left = x - this.content_offset.left - this.focus_size.width / 2;
    var _top = y - this.content_offset.tp -  this.focus_size.height / 2;
    console.log(this.content_offset.tp);

    _left = _left < 0 ? 0 : _left;
    _top = _top < 0 ? 0 : _top;
    _left = _left > 250 ? 250 : _left;
    _top = _top > 250 ? 250 : _top;

    this.focus_ele.style.left = _left + "px";
    this.focus_ele.style.top = _top + "px";

    this.prop_left = _left / 250 ; 
    this.prop_top  = _top / 250;
    
}

Glass.prototype.bigImgMove = function(){
    this.big_img.style.left = -this.prop_left * 450 + "px";
    this.big_img.style.top  = -this.prop_top  * 450 + "px";
}

var m = new Glass();
m.bindEvent();